import { StackNavigator, TabNavigator } from 'react-navigation';
import React, { Component } from 'react';
import { SectionList, Dimensions, Platform, StyleSheet, Text, View, Image, Button, FlatList, TouchableHighlight } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import NetUtils from './NetUtils';
var username;
var password;
var url = 'http://119.29.13.173:8000/api';
var opts ={};



var {width, height} = Dimensions.get('window');
var dataAry = [];
var day = new Date();
var missionColor = new Array("rgb(59,99,127)", "rgb(193,230,255)", "rgb(118,199,255)", "rgb(97,115,127)", "rgb(94,159,204)");
var missionIndex = 0;

var opts = {};
class TimeAxisScreen extends React.Component {
    backLatest=() => {
        this.props.navigation.goBack();
    }
    static navigationOptions = {
        headerTitle: '时间轴',
        headerRight: <TouchableHighlight activeOpacity={1} underlayColor="#eee" onPress={() => alert('Hello')}><Image source={require('./../res/icon/reminder-icon.png')} style={{
            margin: 10
        }}/></TouchableHighlight>,
        headerTitleStyle: {
            fontWeight: 'normal',
            color: '#2196F7',
            alignSelf: 'center'
        },
    };
    constructor(props) {
        super(props);
        this.state = {
            dataAry: dataAry,
            datas: [],
        }
    }
    _renderItem = (info) => {
        missionIndex = (info.item.goalId+1)%5;
        txt = info.item.content;
        console.log(0.05*(Math.exp(info.item.days)-1));
        return (
            <View style={{
                flexDirection: "row",
                height: 50
            }}>
            <View style={{flex:1,flexDirection: "row"}}>
            <View style={{
                flex: 0.03*info.item.days,
                backgroundColor: missionColor[missionIndex % 5]
            }}/></View>
            <View style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center'
            }}>
              <Text>{info.item.date}</Text>
            </View>
            <View style={{
                flex: 2,
                alignItems: 'center',
                justifyContent: 'center'
            }}>
              <Text>{info.item.content}</Text>
            </View>
          </View>
        )
    }

    _sectionComp = (info) => {
        var txt = info.section.key;
        return <Text
            style={{
                height: 50,
                textAlign: 'right',
                textAlignVertical: 'center',
                backgroundColor: 'rgb(233,233,239)',
                color: '#2196F7',
                fontSize: 30
            }}>{txt}</Text>
    }

    componentDidMount() {
        var datas = [];
        var map = new Map(); 
         //根据获取的数据创建map
            var service = 'query_time_shaft';
            opts = {
            };
            NetUtils.post(url, service, opts, (data) => {
                for (var i in data.goal) {
                    let begind = data.goal[i].beginDate.split("-"); 
                    let endd = data.goal[i].endDate.split("-");
                    let last = data.goal[i].days;

                    let m = parseInt(begind[0]) + '年' + parseInt(begind[1]) + '月';
                    let mm = parseInt(endd[0]) + '年' + parseInt(endd[1]) + '月';
                    let date =begind[1] + '.' + begind[2] + '-'+endd[1] + '.' + endd[2] ;
                    /*
                    if (m === mm)
                    {
                        begind[1] + '月' + begind[2] + '日-'+endd[1] + '月' + endd[2] + '日';
                    }
                    else 
                    {
                         begind[1] + '月' + begind[2] + '日-'+endd[1] + '月' + endd[2] + '日';
                    }
                    */
                    var tmp = [];
                    if (!map.has(m))
                        {
                            tmp = [];
                        }
                    else {
                           tmp = map.get(m);
                       };
                    tmp.push({
                            key: tmp.length,
                            date: date,
                            content: data.goal[i].goalTitle,
                            goalId:data.goal[i].goalId,
                            days:last,
                    });
                    map.set(m,tmp);

                    if (mm === m) continue;
                    m = mm;

                    if (!map.has(m))
                        {
                            tmp = [];
                        }
                    else {
                           tmp = map.get(m);
                       };
                    tmp.push({
                            key: tmp.length,
                            date: date,
                            content: data.goal[i].goalTitle,
                            goalId:data.goal[i].goalId,
                            days:last,
                    });
                    map.set(m,tmp);
                };


                //创建渲染数组
                for (var i = 0; i < 36; ++i) {
                    let txt;
                    if (i < 12)
                        txt = (day.getFullYear() - 1) + '年' + ((i + 1) % 13) + '月';
                    else if (i < 24)
                        txt = day.getFullYear() + '年' + ((i - 11) % 13) + '月';
                    else
                        txt = (day.getFullYear() + 1) + '年' + ((i - 23) % 13) + '月';
                    let content = [];

                    if (map.has(txt))
                    {
                        datas.push({
                        key: txt,
                        data: map.get(txt),
                    });
                    }
                };

                
                this.setState
                ({
                    datas: datas,
                });
                console.log(this.state.datas);
            })
          
        
    };

    render() {

        return (
            <View style={{
                flex: 1
            }}>
        <SectionList
            renderSectionHeader={this._sectionComp}
            renderItem={this._renderItem}
            sections={this.state.datas}
            ItemSeparatorComponent={() => <View><Text></Text></View>}
            />
      </View>
        );
    }

}

const styles = StyleSheet.create({

});

export default TimeAxisScreen;